<template>
  <div id="borrow-user" v-if="visiable">
    <div class="content">
      <div class="row">
        <div class="left">
          <span>借书人：</span>
        </div>
        <div class="right">
          <el-select
            v-model="returnObj.bookUserId"
            filterable
            placeholder="请选择拥有的同事"
          >
            <el-option
              v-for="item in yonghuArr"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="row">
        <div class="left">
          <span>预计还书时间：</span>
        </div>
        <div class="right">
          <el-date-picker
            v-model="returnObj.returnTime"
            placeholder="预计还书时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="row footer">
        <el-button type="primary" @click="ok">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { getYonghu } from "@/api/api";
import { borrowBook } from "@/api/book";
export default {
  data() {
    return {
      returnObj: {
        bookUserId: "",
        returnTime: "",
      },
      yonghuArr: [],
      visiable: false,
      row: {},
    };
  },
  mounted() {
    this.getYonghu();
    this.$nextTick(function () {
      this.$on("show", function (row) {
        this.returnObj.bookUserId = "";
        this.returnObj.returnTime = "";
        this.row = { ...row };
        this.visiable = true;
        this.getYonghu();
      });
    });
  },
  methods: {
    ok() {
      if (!this.returnObj.bookUserId) {
        this.$message.info("借书人不能为空");
        return;
      }
      if (!this.returnObj.returnTime) {
        this.$message.info("预计还书时间不能为空");
        return;
      }
      this.row["bookId"] = this.row.id;
      this.row["borrowUserId"] = this.returnObj.bookUserId;
      this.row["borrowUserName"] = this.yonghuArr.filter((item) => {
        return item.id == this.returnObj.bookUserId;
      })[0]["username"];
      this.row["hopeReturnTime"] = this.returnObj.returnTime;
      borrowBook(this.row).then((res) => {
        if (res.code > 0) {
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
        this.visiable = false;
        this.$emit("getBookList", null);
      });
    },
    cancel() {
      this.visiable = false;
    },
    getYonghu() {
      getYonghu().then((res) => {
        this.yonghuArr = res;
      });
    },
  },
};
</script>
<style lang="stylus">
#borrow-user {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;

  * {
    font-size: 14px;
  }

  .el-select, .el-date-editor {
    width: 100%;
  }

  .content {
    width: 400px;
    padding: 50px 20px 0;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 10px;

    .row {
      width: 100%;
      display: flex;
      padding-bottom: 15px;

      .left {
        flex-basis: 120px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }

      .right {
        flex: 1;
      }
    }

    .footer {
      display: flex;
      justify-content: center;
      padding: 20px 0;

      button {
        margin: 0 20px;
      }
    }
  }
}
</style>